<template>
  <view class="content">
    <Head title="宏烨经纪人" @back="back" icon="" />
    <div class="login">
      <div>
        <input v-model="phone" type="text" placeholder="请输入手机号" /><b
          v-show="flag"
          >手机号输入有误</b
        >
      </div>
      <div>
        <input v-model="codes" type="text" placeholder="请输入验证码" /><button
          :disabled="disabled"
          @click="getCode"
        >
          {{ code }}
        </button>
        <b v-show="flag1">验证码输入有误</b>
      </div>
      <div class="login" @click="login">
        <b>立即登录</b>
      </div>
    </div>


  </view>
</template>

<script>
import Head from "@/components/head/index";
import { login } from "@/service/index";

export default {
  components: { Head },
  data() {
    return {
      list: ["石景山"],
      code: "发送验证码",
      disabled: false,
      phone: "",
      codes: "",
      flag: false,
      flag1: false
    };
  },
  onLoad() {},
  methods: {
    back() {
      wx.navigateBack({
        delta: 1
      });
    },
    getCode() {
      if (/^1[3-9]\d{9}$/.test(this.phone)) {
        this.flag = false;
        if (!this.codes) {
          this.flag1 = false;
          this.disabled = true;
          //启动定时器
          let countTime = 30;
          var timeFlag = setInterval(() => {
            if (countTime > 0) {
              this.code = countTime + "s";
              countTime--;
            } else {
              clearInterval(timeFlag);
              this.disabled = false;
              this.code = "重新发送";
              countTime = 30;
            }
          }, 1000);
        } else {
          this.flag1 = true;
        }
      } else {
        this.flag = true;
      }
    },
    async login() {
      if (/^1[3-9]\d{9}$/.test(this.phone)) {
        this.flag = false;
        if (this.codes) {
          this.flag1 = false;
          let res = await login({ username:this.phone, password:this.codes });
          console.log(res,121);
          if (res.status === 200) {
              // wx.showToast({
              //   title: '登录成功',
              //   icon: 'success',
              //   duration: 2000
              // })
            wx.setStorageSync("token", res.body.token);
            console.log(wx.getStorageSync())
            wx.reLaunch({
              url: "/pages/authorization/index"
            });
          }else{
              wx.showToast({
                title: '登录失败',
                icon: 'error',
                duration: 2000
              })
          }
        } else {
          this.flag1 = true;
        }
      } else {
        this.flag = true;
      }
    }
  }



};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
}
.login {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  div {
    width: 100%;
    height: 100rpx;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    margin: 20rpx 0;
  }
  div:nth-child(1) {
    position: relative;
    b {
      color: red;
      position: absolute;
      top: 100rpx;
    }
  }
  div:nth-child(3) {
    border: 0;
  }
  div:nth-child(2) {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    > button {
      color: skyblue;
      border: 0;
      outline: none;
      height: 100%;
      width: 300rpx;
    }
    b {
      color: red;
      position: absolute;
      top: 100rpx;
    }
  }
  .login {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    background-color: rgb(110, 197, 231);
    color: #fff;
    display: flex;
    justify-content: center;
    b {
      font-size: 36rpx;
      font-weight: 900;
    }
  }
}




</style>
